<template>
    <el-checkbox-group v-model="checkedLanguages" :min="1">
        <el-checkbox v-for="language in options" :key="language.value" :label="language.value">
            {{ language.label }}
        </el-checkbox>
    </el-checkbox-group>
</template>

<script setup lang="ts">
import { ref, onMounted, PropType } from 'vue';
type Option = {
    label: string;
    value: string;
};
const checkedLanguages = ref<string[]>([]);
const props = defineProps({
    options: {
        type: Array as PropType<Option[]>,
        required: true,
    },
});
onMounted(() => {
    // console.log('mounted');
    // const data = [
    //     { label: '英文', value: 'english' },
    //     { label: '马来文', value: 'malay' },
    //     { label: '中文', value: 'chinese' },
    //     { label: '日本語', value: 'japanese' },
    // ];
    // languages.value.push(...data);
    checkedLanguages.value = props.options.map(language => language.value);
});
</script>
